// 试题管理页面
<template>
	<div class="all">
		<span>
			<el-button @click="add()" type="primary">增加试题</el-button>
		</span>
    <!-- 选难度和类型 -->
    <div id="selectfilter">
      <el-select v-model="level" placeholder="难度" style="width: 100px;" @change="getTopicInfo">
        <el-option v-for="(item,index) in options" :key="item+index" :label="item.text" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="type" placeholder="类型" style="width: 100px;" @change="getTopicInfo">
        <el-option v-for="(item,index) in optiont" :key="item+index" :label="item.text" :value="item.id"></el-option>
      </el-select>
    </div>

		<div style="margin-top: 15px;width: 30%;float: right;margin-bottom: 10px;margin-top: 0px;">
			<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
				<el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 100px;">
          <el-option label="题目" :value="1" :key="1"></el-option>
          <el-option label="课程" :value="2" :key="2"></el-option>
				</el-select>
				<el-button slot="append" icon="el-icon-search" @click="getTopicInfo"></el-button>
			</el-input>
		</div>

		<el-table :data="pagination.records" border>
			<el-table-column fixed="left" prop="topicId" label="选择题编号"></el-table-column>
			<el-table-column prop="topicName" label="试题题目"></el-table-column>
			<el-table-column prop="topicAnswer" label="试题答案"></el-table-column>
			<el-table-column prop="topicScore" label="试题分数"></el-table-column>
			<el-table-column prop="topicLevel" label="试题难度" :formatter="formatLevel"></el-table-column>
			<el-table-column prop="topicType" label="试题类型" :formatter="formatType"></el-table-column>
			<el-table-column prop="analysis" label="试题解析"></el-table-column>
			<el-table-column prop="course.courseName" label="课程名称"></el-table-column>
			<el-table-column fixed="right" label="操作" width="200px">
				<template slot-scope="scope" >
					<el-button @click="updTopic(scope.row.topicId)" type="primary" size="small">编辑</el-button>
					<el-button @click="deleteById(scope.row.topicId)" type="danger" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
		 :page-sizes="[5, 10]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
		 class="page">
		</el-pagination>
		<!-- 编辑对话框-->
		<el-dialog title="编辑试题信息" :visible.sync="dialogVisible" width="25%" :before-close="handleClose" >
			<section class="update" >
				<el-form ref="form" :model="form" label-width="100px">
					<el-form-item label="选择题编号">
						<el-input disabled="" v-model="form.topicId"></el-input>
					</el-form-item>
					<el-form-item label="试题题目">
						<el-input v-model="form.topicName"></el-input>
					</el-form-item>
					<el-form-item label="试题答案">
						<el-input v-model="form.topicAnswer"></el-input>
					</el-form-item>
					<el-form-item label="试题分数">
						<el-input v-model.number="form.topicScore"></el-input>
					</el-form-item>
					<el-form-item label="试题难度">
            <el-select v-model="form.topicLevel">
              <el-option v-for="(item,index) in options" :key="item+index" :label="item.text" :value="item.id"></el-option>
            </el-select>
					</el-form-item>
					<el-form-item label="试题类型">
            <el-select v-model="form.topicType">
              <el-option v-for="(item,index) in optiont" :key="item+index" :label="item.text" :value="item.id"></el-option>
            </el-select>
					</el-form-item>
					<el-form-item label="试题解析">
						<el-input v-model="form.analysis"></el-input>
					</el-form-item>
          <el-form-item label="课程编号">
            <el-select v-model="form.course.courseId" placeholder="请选择课程" @change="getCourseName(form.course.courseId)">
              <el-option v-for="(item,index) in course" :key="item+index" :label="item.courseId" :value="item.courseId"></el-option>
            </el-select>
          </el-form-item>
					<el-form-item label="课程名称">
						<el-input disabled="" v-model="form.course.courseName"></el-input>
					</el-form-item>
				</el-form>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        //分页后的试题信息
				pagination: {
					current: 1, //当前页
					total: null, //记录条数
					size: 5//每页条数
				},
				dialogVisible: false, //对话框
				form: {
          topicId:'',
          topicName:'',
          topicAnswer:'',
          topicScore:[{required: true,type:'number',trigger:'blur'}],
          topicLevel:'',
          topicType:'',
          analysis:'',
          course:{
            courseId:'',
            courseName:''
          }
        },
        options:[
          {text:'简单',id:'1'},
          {text:'一般',id:'2'},
          {text:'困难',id:'3'}
        ],
        optiont:[
          {text:'判断题',id:'1'},
          {text:'填空题',id:'2'},
          {text:'综合题',id:'3'}
        ],
        course:[],
				select: 1,
        input3: '',
        level: '',
        type:''
			};
		},
		created() {
			this.getTopicInfo();
		},
		methods: {
			getTopicInfo() {
        console.log(this.select)
        if(this.select == 1){
          //分页查询所有试题信息 ✔
          this.$axios('/api/topicsingle',{
            params: {
              keyword:this.input3,
              level:this.level,
              type:this.type,
              page:this.pagination.current,
              size:this.pagination.size
            }
          }).then(res => {
          	this.pagination = res.data;
          }).catch(error => {});
        }else if(this.select == 2){
          //分页查询所有试题信息 ✔
          this.$axios('/api/topicsinglebycourse',{
            params: {
              keyword:this.input3,
              level:this.level,
              type:this.type,
              page:this.pagination.current,
              size:this.pagination.size
            }
          }).then(res => {
          	this.pagination = res.data;
          }).catch(error => {});
        }

			},
			//改变当前记录条数 ✔
			handleSizeChange(val) {
				this.pagination.size = val;
				this.getTopicInfo();
			},
			//改变当前页码，重新发送请求 ✔
			handleCurrentChange(val) {
        console.log("val:"+val)
				this.pagination.current = val;
				this.getTopicInfo();
			},
      getCourseName(CourseId){  //根据课程编号获取课程名 ✔
        this.$axios('/api/course/getCouById/'+CourseId).then(res => {
          this.form.course.courseName = res.data
        })
      },
      getAllCourseId(){ //获取所有课程编号 ✔
        this.$axios('/api/course/getCouAll').then(res => {
            this.course = res.data
        })
      },
			updTopic(topicId) { //打开并获取要修改的试题信息 ✔
        this.getAllCourseId()
				this.dialogVisible = true
				this.$axios('/api/getTopicById/'+topicId).then(res => {
					this.form = res.data
          this.form.topicLevel = String(res.data.topicLevel)
          this.form.topicType = String(res.data.topicType)
				})
			},
			deleteById(topicId) { //删除试题信息 ✔
				this.$confirm("确定删除当前试题吗？删除后无法恢复", "Warning", {
					confirmButtonText: '确定删除',
					cancelButtonText: '算了,留着吧',
					type: 'danger'
				}).then(() => { //确认删除
					this.$axios({
						url: '/api/delTopicById/'+topicId,
						method: 'delete'
					}).then(res => {
            if(res.data == 1){
              this.$message({
              	message: '删除成功',
              	type: 'success'
              })
              this.getTopicInfo()
            }else{
              this.$message({
              	message: '删除失败',
              	type: 'error'
              })
            }
					})
				}).catch(() => {

				})
			},
			submit() { //提交更改 ✔
				this.dialogVisible = false
				this.$axios({
					url: '/api/updTopicById',
					method: 'put',
					data: {
						...this.form
					}
				}).then(res => {
					console.log(res)
					if (res.data == 1) {
						this.$message({
							message: '更新成功',
							type: 'success'
						})
					}
					this.getTopicInfo()
				})
			},
			handleClose(done) { //关闭提醒
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					}).catch(_ => {});
			},
			add() { //打开增加试题框 ✔
        this.$router.push({
        	path: '/addTopic'
        })
			},
      formatLevel : function(row,column,cellValue){
        if(cellValue === 1){
          return '简单'
        }else if(cellValue === 2){
          return '一般'
        }else if(cellValue === 3){
          return '困难'
        }
      },
      formatType : function(row,column,cellValue){
        if(cellValue === 1){
          return '判断题'
        }else if(cellValue === 2){
          return '填空题'
        }else if(cellValue === 3){
          return '综合题'
        }
      }
		}
	};
</script>
<style lang="scss" scoped>
	.all {
		padding: 0px 40px;

		.page {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.edit {
			margin-left: 20px;
		}

		.el-table tr {
			background-color: #dd5862 !important;
		}
	}

	.el-table .warning-row {
		background: #000 !important;
	}

	.el-table .success-row {
		background: #dd5862;
	}

  #selectfilter {
    display: inline-block;

    margin-left: 787px;
  }


</style>
